<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Expires" content="0" />
	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
	/>
	<title>调查问卷</title>
	<link rel="stylesheet" href="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrap/dist/css/bootstrap.min.css">
	<link href="http://carowner.yonyouauto.com/fs01/ase/v1/components/mobisscroll/css/mobiscroll.custom-3.0.0-beta2.min.css" rel="stylesheet"
	 type="text/css" />
	<link rel="stylesheet" href="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrapValidator/css/bootstrapValidator.css"
	 type="text/css" />
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/jquery2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/common/py.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrap/dist/js/bootstrap.min.js"></script>
	<script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/mobisscroll/js/mobiscroll.custom-3.0.0-beta2.min.js" type="text/javascript"></script>

	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/hammer/hammer.min.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/components/hammer/jquery.hammer.js"></script>
	<script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/vue/vue.min.js"></script>
	<script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/bootstrapValidator/js/bootstrapValidator.js"></script>
	<script src="http://carowner.yonyouauto.com/fs01/ase/v1/components/surveyjs/survey.jquery.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/common/common.js"></script>
	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/Gmccui.js"></script>

	<script type="text/javascript" src="http://carowner.yonyouauto.com/fs01/ase/v1/js/common/wechatCommon.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=6WLRtwjdIPrXW5FaNIsgdZG038pLb84Z"></script>
	<style>
		a {
			text-decoration: none;
			color: #000;
		}

		.product-head h1 {
			font-size: 14px;
			font-family: Arial, Helvetica, sans-serif;
			margin-bottom: 3px;
			margin-left: 3px;
		}

		.product-head {
			font-size: 12px;
			padding: 4px;
			background-color: #ccc;
			width: 235px;
		}

		.filterform input {
			font-size: 15px;
			padding: 3px;
			border: 1px solid #999;
		}

		li {
			padding: 0;
			margin: 3px;
			list-style: none;
			width: 100%;
		}

		li a {
			color: #000;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 11px
		}

		ul {
			margin: 0;
			padding: 0;
		}

		.clear {
			clear: both;
		}

		body {
			background-color: #fff;
			color: #777;
		}

		.item-wrap .item {
			width: 100%;
			height: 80px;
			background-color: #fff;
			padding: 15px 0px;
			border-bottom: 1px solid #ddd;
		}

		.item-wrap>.item:last-child {
			border-bottom: 1px solid #fff;
		}

		.item-wrap .item .flag {
			padding: 2px;
			border: 1px solid red;
			color: red;
			border-radius: 3px;
			float: right;
			letter-spacing: 2px;
			margin-right: 5px;
		}


		.drivider-line-1 {
			height: 1px;
			display: inline-block;
			width: 100%;
			background-color: #ddd;
			margin: 0 0 5px;

		}

		.drivider-line-10 {
			height: 10px;
			display: inline-block;
			width: 100%;
			background-color: #ddd;
			margin: 0px 0px 5px;

		}

		.border-dash-1 {
			width: 100%;
			display: block;
			border: 1px dashed #ddd;
			min-height: 100px;
			border-radius: 2px;
		}

		.font-red,
		.font-red * {
			color: #ea0707;
		}

		.wd-80 {
			width: 80%;
		}

		.no-radius {
			border-radius: 0px;
		}

		#syscontent {
			position: absolute;
			height: 100%;
			width: auto;
			background-color: #fff;
		}

		.padding-top-15 {
			padding-top: 15px;
		}

		.padding-15 {
			padding: 15px;
		}

		.line-h-30 {
			line-height: 30px;
		}

		#surveyContainer .panel-body>div:first-child {
			padding: 15px;
			border: 1px dashed #ddd;
			margin-left: -15px;
			margin-right: -15px;
			border-radius: 4px;
		}
		#surveyContainer .panel-footer {
			background-color: white;
			border-top: 0;
		}
		.max-img {
			width: 100%;
			height: 50px;
			margin: 0px 15px;
			max-width: 100px;
		}

		.max-img>img {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

<body>
	<div id="syContent" class="container" style="overflow-x:hidden;">
		<div class="row">
			<img id="firstImg" src="http://carowner.yonyouauto.com/fs01/ase/v1/images/GQ/d9.png" style="width:100%;">
		</div>
		<div class="row">
			<div class="drivider-line-10"></div>

			<!-- 问卷列表 -->
			<div class="item-wrap">
				<div class="item" v-for="item in items" v-on:click="fnSkip(item)">
					<div class="row">
						<div class="col-xs-4 text-right">
							<div class="max-img">
								<img class="img-rounded wd-80 no-radius" v-bind:src="item['QNE_ICON']">
							</div>
						</div>
						<div class="col-xs-8">
							<p>
								<span v-text="item['QNE_TITLE']"></span>
								<span v-if="item['IS_DONE'] == 1" v-text="item['IS_DONE'] == 1?'已答':''" v-bind:class="item['IS_DONE'] == 1?'flag':''"></span>
							</p>
							<p v-text="item['QNE_BEGIN_DATE']+'~'+item['QNE_END_DATE']"></p>
						</div>
					</div>
				</div>

			</div>
			<!-- 列表结束 -->


		</div>
	</div>
	<!-- 问卷开始 -->
	<div id="syscontent" class="container hidden">
		<div class="row">
			<img id="firstImg" src="http://carowner.yonyouauto.com/fs01/ase/v1/images/GQ/d9.png" style="width:100%;">
		</div>

		<div class="row">
			<div class="col-xs-12 padding-top-15">
				<div class="border-dash-1 padding-15 line-h-30">
					尊敬的顾客，你好！
					<br/> 为了给你提供更优质的服务，现邀请您用1分钟的时间，说出您的心声。
				</div>
			</div>

			<div class="col-xs-12 padding-top-15">
				<a class="btn btn-danger col-xs-12" onclick="Gmccui.pageSwitch('#syscontent','#questioncontent',quePageFn())" style="background:#3790f3;border-color:#3790f3;">开始答题</a>
			</div>

		</div>
	</div>

	<!-- 开始答题 -->
	<div id="questioncontent" class="container hidden">
		<div class="row">
			<img src="http://carowner.yonyouauto.com/fs01/ase/v1/images/GQ/d9.png" style="width:100%;">
		</div>
		<div class="row">
			<div class="col-xs-12">
				<h5 v-text="title"></h5>
			</div>
			<div class="col-xs-12">
				<div id="surveyContainer"></div>
			</div>
		</div>

	</div>
	<script>

		var Gmccui = new Gmccui();
		var apiUrl = [
			{ "id": "questionType", "url": "questionType" },//问卷列表
			{ "id": "questionResultDetail", "url": "questionResultDetail" },//问卷调查题目与选项
			{ "id": "commitNaire", "url": "commitNaire" }//问卷调查提交
		];
		Gmccui.setHeaderMap({ "Cookie": document.cookie });
		Gmccui.setDomainUrl(getRootPath() + "/questionnaire/api/v1/");
		//Gmccui.setDomainUrl("http://localhost:9006/questionnaire/api/v1/");
		Gmccui.setMutiApi(apiUrl);
		var syContentData = { "items": [] };
		var qnInfo = {};
		Vue.filter('cutText', function (value) {
			return value.toString().length < 8 ? value : value.toString().substring(0, 8) + "...";
		})
		var urlParams = Gmccui.getMutiQueryValue(['qnid', 'IS_DONE', 'openid']);
		if (urlParams.hasOwnProperty('openid') && urlParams['openid'] != null) {

			syContentApp.fnSkip(urlParams);
		}
		var syContentApp = new Vue({
			el: '#syContent', data: syContentData, methods: {
				fnSkip: function (item) {
					if (item['IS_DONE'] == 0) {
						Gmccui.pageSwitch('#syContent', '#syscontent', syPageFn(item));
					} else {
						qnInfo = $.extend(true, qnInfo, item);
						Gmccui.pageSwitch('#syContent', '#questioncontent', quePageFn());
					}

				}
			}
		});

		Gmccui.getData("questionType", { "queryType": "1", "userId": 1 }, function (_callback) {
			//Gmccui.getData("questionType",{"queryType":"1","userId":228},function(_callback){
			syContentData.items = _callback['data'];
		})




		/* 问卷调查描述页面 */
		function syPageFn(qnItem) {
			//todo
			//alert(qid);
			qnInfo = $.extend(true, qnInfo, qnItem);


		}


		/* 开始答题页面 */
		function quePageFn() {
			Survey.Survey.cssType = "bootstrap";
			var questionData = { "title": qnInfo["QNE_TITLE"] };
			var questionApp = new Vue({ el: '#questioncontent', data: questionData });
			var surveyJSON = {};


			var redCss = {
				"root": "",
				"header": "panel-heading",
				"body": "panel-body",
				"footer": "panel-footer text-center",
				"navigationButton": "button btn",
				"navigation": {
					"complete": "btn btn-info",
					"prev": "btn btn-warning",
					"next": "btn btn-danger"
				},
				"progress": "progress center-block",
				"progressBar": "progress-bar progress-bar-info",
				"pageTitle": "",
				"row": "",
				"question": {
					"root": "",
					"title": "",
					"comment": "form-control",
					"indent": 20
				},
				"error": {
					"root": "alert alert-danger",
					"icon": "glyphicon glyphicon-exclamation-sign",
					"item": ""
				},
				"checkbox": {
					"root": "form-inline",
					"item": "checkbox",
					"other": ""
				},
				"comment": "form-control",
				"dropdown": "form-control",
				"matrix": {
					"root": "table table-striped"
				},
				"matrixdropdown": {
					"root": "table"
				},
				"matrixdynamic": {
					"root": "table",
					"button": "button"
				},
				"multipletext": {
					"root": "table",
					"itemTitle": "",
					"itemValue": "form-control"
				},
				"radiogroup": {
					"root": "form-inline",
					"item": "radio",
					"other": ""
				},
				"rating": {
					"root": "btn-group",
					"item": "btn btn-default"
				},
				"text": "form-control",
				"window": {
					"root": "modal-content",
					"body": "modal-body",
					"header": {
						"root": "modal-header panel-title",
						"title": "pull-left",
						"button": "glyphicon pull-right",
						"buttonExpanded": "glyphicon pull-right glyphicon-chevron-up",
						"buttonCollapsed": "glyphicon pull-right glyphicon-chevron-down"
					}
				}
			}




			Gmccui.getData("questionResultDetail", { "qneId": qnInfo["QNE_ID"], "userId": Gmccui.getQueryValue("userId")}, function (_callback) {
				surveyJSON = $.extend(true, surveyJSON, _callback['data']['pg']);
				var survey = new Survey.Model(surveyJSON);
				survey.locale = "my";


				var mycustomSurveyStrings = {
					pagePrevText: "上一题",
					pageNextText: "下一题",
					completeText: "完成答题",
					progressText: "已完成{0}/{1}",
					requiredError: "请回答该问题",
					emptySurvey: "暂无调查问卷例题！",
					completingSurvey: "感谢您完成此次调查问卷！"
				};
				Survey.surveyLocalization.locales["my"] = mycustomSurveyStrings;
				if (qnInfo["IS_DONE"] == 1) {
					survey.mode = "display";
					survey.data = _callback['data']['as'];
				} else {
					survey.showProgressBar = "bottom";
				}
				$("#surveyContainer").Survey({
					model: survey,
					css: redCss,
					onComplete: function (sender) {
						var mySurvey = sender;
						var surveyData = sender.data;
						var commit = {
							"twoId": qnInfo["ID"],//主键TT_OWNER_Q ID /prev
							"answer": "",//"回答主体"+"/@"+"QTN_ID"
							"questionId": "",//QTN_ID
							"userId": Gmccui.getQueryValue("userId"),//USER_ID from openid
							"qneId": qnInfo["QNE_ID"],//QNE_ID prev
							"sfdt": "9"
						};
						var _answer = "", _qtnId = "";
						for (var qtnId in surveyData) {
							var value = surveyData[qtnId];
							_qtnId += qtnId + ",";
							_answer += (value instanceof Array ? value.join(",") : value) + "/@" + qtnId + ";";
						}
						commit["answer"] = _answer.substring(0, _answer.length - 1);
						commit["questionId"] = _qtnId.substring(0, _qtnId.length - 1);
						Gmccui.postData("commitNaire", commit, function (_callback) {
							console.log(_callback);
						})
					}
				});
			})


		}





	</script>
</body>

</html>